<?php
defined('_JEXEC') or die('Restricted access');
$app = JFactory::getApplication();
$input = $app->input;
$item  = $input->getArray();
?>
<link href="/templates/ppspconsole/css/select2.min.css" type="text/css" rel="stylesheet" />
<div class="res-title-rg pos_pre">
    <span class="fl pos-icon text-c"><i class="acquisition"></i></span>
    <div class="title-info">
        <h2 class="fontsize20">Cohort</h2>
        <p><a href="#">Home</a>&nbsp;/&nbsp;<a href="#">Acquisition</a>&nbsp;/&nbsp;Cohort</p>
    </div>
</div>
<div class="">
	<div class="container-fluid">
		<div class="row tymgbt">
			<div class="col-sm-6">
				<div class="bgwhite bore0 pd30 cohothg">
					<h3 class="fontsize20">Filter</h3>
					<div class="cohort-select" style="height:20px;">
						<div class="fl d-wd1">Campaign</div>
						<div class="fl d-wd1">City</div>
					</div>
					<div class="cohort-select tymgbt">
						<div class="fl d-wd1">
							<select class="select2" id="campaign" >
		                      <option value="">all</option>
								<?php foreach ($item['cohort']['names'] as $key =>  $value):?>
		                      <option value="<?php echo $value ?>"><?php echo $value ?></option>
								<?php endforeach;?>
		                    </select>
						</div>
						<div class="fl d-wd1">
							<select class="select2" id="city">
								<option value="">all</option>
								<?php foreach ($item['cohort']['cities'] as $key =>  $value):?>
									<option value="<?php echo $value ?>"><?php echo $value ?></option>
								<?php endforeach;?>
							</select>
						</div>

					</div>
					<div class="eventSync-nr">
	                    <table class="table table-striped">
	                      <tbody id="Filter">
	                      </tbody>
	                    </table>
	                </div>
				</div>
			</div>
			<div class="col-sm-6">
				<div class="bgwhite bore0 pd30 cohothg">
					<h3 class="fontsize20">Group by</h3>
					<div class="cohort-select tymgbt">
						<div class="fl d-wd1">
							<label><input name="group" type="radio" value="channel" checked="true"/> channel</label> &nbsp;&nbsp;
							<label><input name="group" type="radio" value="campaign" /> campaign</label>&nbsp;&nbsp;
							<label><input name="group" type="radio" value="city" /> city</label>
						</div>

						<div class="fr"><a href="javascript:void(0)"  id="CohortQuery" class="btn-popup fontsize16">Query</a></div>
					</div>
					<div class="eventSync-nr">
	                    <table class="table table-striped">
	                      <tbody id="Group">
	                      </tbody>
	                    </table>
	                </div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="ws-content pdall15">
	<div id="main" style="height:520px;"></div>
</div>
<script type="text/javascript" src="/templates/ppspconsole/js/select2.min.js"></script>
<script type="text/javascript" src="/templates/ppspconsole/js/zh-CN.js"></script>
<script type="text/javascript">
$(function(){
    $("select").select2();
	$("#CohortQuery").click(function(){
		var campaign = $('#campaign').val();
		var city = $('#city').val();
		var group = $("input[name='group']:checked").val();
		if (group == '' || group == null) {
			layer.msg('Group by Required',{shift:6,icon:2});
			return false;
		}
		$('#ajax-loading').show();
		$.getJSON('/index.php?option=com_console&view=cohort&Itemid=127&task=Cohort&action=ajax', {'campaign':campaign,'city':city,'group':group}, function(rpt){
			$('#ajax-loading').hide();
			var names = [];
			var items = [];
			var i;
			if (rpt.series.length > 0) {
				for (i = 0; i < rpt.series.length; i++) {
					var d = rpt.series[i];
					names.push(d.name);
					items.push({
						"name": d.name,
						"value": d.value
					});
				}
			}
			var chart = createLines({
				divId: 'main',
				title: 'Daily User Value Trend',
				names: names,
				times:rpt.times,
				values:items,
				series:rpt.series
			});
			chart.hideLoading();
			chart.setOption({
				option: {
					title: {
						show: false
					}
				}
			});
		})
		.error(function() {
			$('#ajax-loading').hide();
		});
	});
});
</script>
